<template>
  <div
    :style="{ width: size + 'px', height: size + 'px' }"
    class="progress-circle"
  >
    <svg :width="size" :height="size" viewBox="0 0 100 100">
      <circle
        class="background"
        cx="50"
        cy="50"
        r="45"
        stroke-width="5"
        fill="none"
      />
      <circle
        class="progress"
        cx="50"
        cy="50"
        r="45"
        stroke-width="5"
        :stroke="color"
        fill="none"
        stroke-dasharray="282"
        :stroke-dashoffset="282 - (computedProgress / 100) * 282"
        style="transition: stroke-dashoffset 0.6s"
      />
    </svg>
    <div class="text" :style="{ fontSize: size / 5 + 'px' }">{{ text }}</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, onMounted } from 'vue'
 
const props = defineProps<{
  progress?: number
  color?: string
  size?: number
  text?: string
  duration?: number
}>()
 
// 设置默认值
const defaultProgress = 50
const defaultColor = 'red'
const defaultSize = 100
const defaultDuration = 500
const defaultText = '' // 默认文案
 
const computedProgress = ref(0)
const color = ref(props.color ?? defaultColor) // 使用传入的颜色或默认颜色
const size = ref(props.size ?? defaultSize) // 使用传入的大小或默认大小
const text = ref(props.text ?? defaultText) // 使用传入的文本或默认文本
 
onMounted(() => {
  setTimeout(() => {
    computedProgress.value = props.progress ?? defaultProgress
  }, props.duration ?? defaultDuration)
})
</script>
 
<style scoped>
.progress-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
 
svg {
  transform: rotate(-90deg);
}
 
circle.background {
  stroke: #eee;
}
 
circle.progress {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}
 
.text {
  position: absolute;
  font-weight: bold;
  color:#fff;
}
</style>